<template>
	<view class="order-select">
		<u-navbar bgColor="#fff" :fixed="true" leftIconColor="#333" leftIconSize="42rpx" autoBack placeholder
			title="选择服务">
		</u-navbar>
		<view class="order-container">
			<view v-for="item in serveList" :key="item.serveCode" class="order-detail">
				<view style="margin-right:40rpx ;">
					<img :src="item.img" style="width: 160rpx;height: 160rpx;" />
				</view>
				<view style="width: 100%;">
					<view style="margin-bottom: 20rpx;">
						{{item.title}}
					</view>
					<view
						style="display: flex;justify-content: space-between;margin-bottom: 10rpx;color: #c43644;font-size: 28rpx;">
						<view style="letter-spacing: 1px;">
							¥{{item.price}}
						</view>
					</view>
					<view style="display: flex;justify-content: space-between;width: 100%;">
						<view style="font-size: 24rpx;line-height: 52rpx;">
							23人已预约
						</view>
						<view
							style="width: 136rpx;height:40rpx ;border:1px solid #b1b1b1;display: flex;font-size: 28rpx;justify-content: space-between;color: #737373;">
							<view @click="operateTime(item.serveCode,'reduce')"
								style="line-height: 40rpx;text-align:center;width: 100%;">-</view>
							<view
								style="line-height: 42rpx;border-right:1px solid #b1b1b1; border-left:1px solid #b1b1b1;width:140rpx;text-align: center;">
								{{item.count}}
							</view>
							<view @click="operateTime(item.serveCode,'add')"
								style="line-height: 40rpx;text-align:center;width: 100%;">+</view>
						</view>
					</view>
				</view>
			</view>

		</view>
		<view class="confirmSelect">
			<view @click="gotoOrder" class="confirm">
				确定
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				serveList: [{
					title: '陪诊陪护(1小时)',
					price: 30,
					count: 0,
					serveCode: '001',
					img: require('@/static/images/Rectangle 67.png')

				}, {
					title: '陪诊陪护(6小时)',
					price: 180,
					count: 0,
					serveCode: '006',
					img: require('@/static/images/Rectangle 67-1.png')
				}, {
					title: '陪诊陪护(1天)',
					price: 720,
					count: 0,
					serveCode: '024',
					img: require('@/static/images/Rectangle 67-2.png')
				}, {
					title: '陪诊陪护(2天)',
					price: 1440,
					count: 0,
					serveCode: '048',
					img: require('@/static/images/Rectangle 67-3.png')
				}, {
					title: '陪诊陪护(7天)',
					price: 5040,
					count: 0,
					serveCode: '168',
					img: require('@/static/images/Rectangle 67-4.png')
				}],
				control: '',
			}
		},
		onLoad(e) {
			this.control = e.data
		},
		methods: {
			operateTime(code, method) {
				if (method == 'reduce') {
					let index = this.serveList.findIndex(i => i.serveCode == code)
					if (this.serveList[index].count > 0) {
						this.serveList[index].count--
					} else {
						uni.showModal({
							title: '提示',
							content: '数量无法低于0',
						})
					}

				} else {
					let index = this.serveList.findIndex(i => i.serveCode == code)
					if (this.serveList[index].count < 99) {
						this.serveList[index].count++
					} else {
						uni.showModal({
							title: '提示',
							content: '数量无法大于99',
						})
					}
				}

			},
			gotoOrder() {
				let arr = this.serveList.filter(i => {
					return i.count > 0
				})
				if (arr.length == 0) {
					uni.showModal({
						title: '提示',
						content: '您没有添加服务需求',
					})
				} else {
					if (this.control == 'search.vue') {
						this.$store.commit('SET_ORDERS', arr);
						this.$nextTick(() => {
							uni.navigateBack({
								delta: 1
							});
						})
					}
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.order-container {
		height: 100%;
		background-color: #f3f4f9;
		padding: 30rpx 40rpx 160rpx 40rpx;

		.order-detail {
			background-color: #fff;
			padding: 20rpx 30rpx;
			margin-bottom: 30rpx;
			border-radius: 30rpx;
			display: flex;
		}
	}

	.confirmSelect {
		width: 100%;
		font-size: 32rpx;
		color: white;
		background-color: #fff;
		position: fixed;
		bottom: 0;
		height: 140rpx;

		.confirm {
			border-radius: 38rpx;
			width: 176rpx;
			height: 76rpx;
			background-color: #3e67f5;
			text-align: center;
			line-height: 76rpx;
			position: absolute;
			right: 40rpx;
			top: 30rpx
		}
	}
</style>